
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>
        Demo Web App
    </title>
</head>
<!--hf_scroll* can only be used once in a page_ The scroll attribute, so when you want to display the upper, lower, left, and right voice commands at the same time, do not add this hf syntax-->
<!--<body id="all_demo" title="hf_scroll_vertical">-->
<body id="all_demo">
<div id="app">
    <div id="container" class="container">
        <div class="row">
            <div class="col-sm-offset-2 col-sm-6">
                <h2>MoziWare Form</h2>
                <p>Note: This form is a test for web app demo</p>
                <form>
                    <div class="form-group">
                        <p><b>Please enter your name(default number):</b></p>
                        <input type="text"
                               class="form-control"
                               placeholder="Enter Name"
                               title="hf_use_description|hf_show_text"
                        />
                    </div>
                    <div class="form-group">
                        <p><b>Please enter your Age(no number):</b></p>
                        <input type="text"
                               class="form-control"
                               placeholder="Enter Age"
                               title="hf_no_number|hf_use_description|hf_show_text"/>
                    </div>

                    <p><b>Select one or more from list</b></p>
                    <div class="form-group">
                        <input name="checkbox1"
                               type="checkbox"
                               id="checkbox1"
                               title="hf_no_number|hf_make_clickable"/>
                        <label for="checkbox1">Ice Cream</label>

                        <input name="checkbox2"
                               type="checkbox"
                               id="checkbox2"
                               title="hf_no_number"/>
                        <label for="checkbox2">Popcorn</label>

                        <input name="checkbox3"
                               type="checkbox"
                               id="checkbox3"
                               title="Chocolates"/>
                        <label for="checkbox3">Chocolates</label>
                    </div>

                    <p><b>What is your fav colour?</b></p>
                    <div class="form-group">
                        <label>
                            <input type="radio" name="radio1" checked id="None"
                                   title="hf_no_number"/>
                            None
                        </label>
                        <label>
                            <input type="radio" name="radio2" id="red" title="hf_no_number"/>
                            Red-ish
                        </label>
                        <label>
                            <input type="radio" name="radio3" id="Blue" title="hf_no_number"/>
                            Blue
                        </label>
                        <label>
                            <input type="radio" name="radio4" id="green" title="hf_no_number"/>
                            Green
                        </label>
                    </div>
                    <div class="form-group">
                        <p><b>What do you like doing?</b></p>
                        <select class="form-control" title="hf_no_number">
                            <option selected>Select Item</option>
                            <option>Sleeping</option>
                            <option>Eating</option>
                            <option>Programming</option>
                            <option>Eating, Sleeping and Programming</option>
                            <option>Not Sleeping</option>
                            <option>Not Eating</option>
                            <option>Not Programming</option>
                            <option>Do Nothing</option>
                            <option>Do Anything</option>
                            <option>Test Web Demo</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <p><b>Tell me what your best experience in life is</b></p>
                        <textarea class="form-control" rows="5" placeholder="Enter Experiences"
                                  title="hf_no_number|hf_use_description"></textarea>
                    </div>
                    <div class="form-group">
                        <button
                                type="submit"
                                title="hf_no_number">
                            Submit Form
                        </button>
                        <button
                                id="clearForm">
                            Clear Form
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div tabindex="-1" title="hf_no_number">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title"></div>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="form-group">
    <p><textarea  rows="10" cols="50" wrap="off" style="overflow-y:hidden;resize:none" class="form-control"  placeholder="Enter Experiences"
                  title="hf_no_number|hf_use_description">
I can scroll right and left,I can scroll right and left1,
I can scroll right and left,I can scroll right and left2,
I can scroll right and left,I can scroll right and left3,
I can scroll right and left,I can scroll right and left,I can scroll right and left4,
I can scroll right and left,I can scroll right and left,I can scroll right and left5,
I can scroll right and left,I can scroll right and left,I can scroll right and left6,
I can scroll right and left,I can scroll right and left,I can scroll right and left7,
    </textarea></p>
</div>

</body>
</html>
